import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { Link, History } from 'react-router';

import * as Util from '../../common/Util';
import Notify from '../../common/Notification';
import * as TicketActions from '../../actions/TicketActions';
import * as RegisterActions from '../../actions/RegisterActions';
import {
  Input,
  Button
} from 'react-bootstrap';

import * as Shell from '../../common/Shell';
import Ticket from '../../components/Ticket';
import Container from '../../components/Container';

class RegisterApp extends React.Component {

  constructor () {
    super();
    this.state = {
      phone : "",
      deviceInfo : null
    };
  }

  static propTypes = {
    dispatch: React.PropTypes.func.isRequired
  }

  handleSubmitClick(){
    let phone = this.refs.phone.getValue();
    if(!Util.phoneValidate(phone)){
      Notify.makeNotify("手机号码格式不正确");
      return;
    }

    let captcha = this.refs.captcha.getValue();
    if(!Util.captchaValidate(captcha)){
      Notify.makeNotify("验证码格式不正确");
      return;
    }

    let password = this.refs.password.getValue();
    if(!Util.passwordValidate(password)){
      Notify.makeNotify("密码格式不正确");
      return;
    }

    let repassword = this.refs.repassword.getValue();
    if(!Util.passwordValidate(repassword)){
      Notify.makeNotify("确认密码格式不正确");
      return;
    }

    if (password!==repassword) {
      Notify.makeNotify("两次输入密码不匹配");
      return;
    }

    password = Util.RSAEncrypt(password);

    let deviceInfo = this.state.deviceInfo;

    let registerData = {
      phone,
      captcha,
      password,
      deviceid : deviceInfo?deviceInfo.deviceId:"",
      baiduid : deviceInfo?deviceInfo.channelid:"",
      baidu_devicetype : deviceInfo?deviceInfo.devicetype:""
    };

    this.props.registerAction.register(registerData);
  }

  handlePhoneChange(e){
    let phoneNum = e.target.value;
    
    this.setState({
      phone : phoneNum
    });
  }

  onGetDeviceInfoSuccess(data){
    if (data && data.channelid && data.deviceId && data.devicetype) {
      this.setState({
        deviceInfo : data
      });
    }else{
      Notify.makeNotify("未检测到设备信息");
    }
  }

  onSaveUserInfoSuccess(data){
    Notify.makeNotify("恭喜你，注册成功");
    setTimeout(function(){

      let query = { phone : this.state.phone };
      this.props.history.pushState(null, "/Login", query);

    }.bind(this), 2000);
  }

  componentDidMount(){
    //获取设备相关信息
    Shell.callShellMethod("getBaiduYunParamsPlugin", this.onGetDeviceInfoSuccess.bind(this));
  }

  componentDidUpdate(){

    let { register_status = 0, message = "", phone = "", password = "", khid="" } = this.props.register;

    this.props.register.register_status = 0;

    if(register_status === -1){
      Notify.makeNotify(message);
    }else if(register_status === 1){

      let saveUserInfo = {
        khId : khid,
        phoneNo:phone,
        loginPw:password
      };

      //保存用户登录凭据
      Shell.callShellMethod(
        "saveUserInfoPlugin", 
        this.onSaveUserInfoSuccess.bind(this), 
        null, 
        saveUserInfo
      );
    }
  }

  renderTicketLink(){
    return(
      <Ticket phone={this.state.phone} action={this.props.ticketAction}/>
    )
  }

  render() {

    return (
      <Container  
        isGoBack={true} 
        isHeader={true} 
        isFooter={false}
        isAuth = {false}
        headerTitle={"注册"}>
          <div className="blank30"></div>
          <div id="account-panel">
              <form className="form-horizontal">
                <div className="form-element">
                  <Input type="tel" 
                    ref="phone"
                    defaultValue = ""
                    maxLength = "11"
                    placeholder = "请输入手机号码"
                    wrapperClassName="col-xs-12" 
                    onChange={ this.handlePhoneChange.bind(this) }
                    addonBefore="手&nbsp;&nbsp;机&nbsp;&nbsp;号"/>

                  <div className="devider"></div>

                  <Input type="tel" 
                    ref = "captcha"
                    defaultValue=""
                    maxLength = "6"
                    placeholder = "请输入验证码" 
                    wrapperClassName="col-xs-12"
                    addonAfter = { this.renderTicketLink() }
                    addonBefore="验&nbsp;&nbsp;证&nbsp;&nbsp;码"/>
                </div>

                <div className="form-element">
                  <Input type="password" 
                    ref = "password"
                    defaultValue = ""
                    placeholder = "请输入密码"
                    maxLength = "16"
                    wrapperClassName="col-xs-12" 
                    addonBefore="密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码"/>
                  <div className="devider"></div>
                  <Input type="password" 
                    ref = "repassword"
                    defaultValue=""
                    placeholder = "请再次输入密码" 
                    maxLength = "16"
                    wrapperClassName="col-xs-12"
                    addonBefore="确认密码"/>
                </div>

                <div className="text-center padding-left-lg padding-right-lg">
                  <Button bsStyle="primary" block onClick={this.handleSubmitClick.bind(this)}>注册</Button>  
                </div>
              </form>
          </div>
      </Container>
    );
  }
}

export default connect(state => ({
    register : state.register
}), dispatch => ({
    registerAction: bindActionCreators(RegisterActions, dispatch),
    ticketAction: bindActionCreators(TicketActions, dispatch)
}))(RegisterApp);
